import React from 'react'

// icons
import './BgNewsCard.css'
import {getDifferenceBetweenDates} from "../../utils/dateService";

const BgNewsCard = (props) => {
    const {news,} = props

    const {title, readnum, img, thumb, createt,} = news
    const now = new Date()
    const creatAt = new Date(createt * 1000)
    const minBefore = getDifferenceBetweenDates(creatAt, now).minutesDiff

    const containerStyle = {
        backgroundImage: `url(${img || thumb})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: '50% 50%',
    }


    return <div style={{padding: '6px 12px 12px', background: '#fff', marginBottom: '6px',}}>
        <div
            className='home-news-card-lg'
            style={containerStyle}
            key={title}
        />
        <div>
            <p className='news-card-title' style={{margin: '12px 0 8px',}}>{title}</p>
            {/*<p className='gray-text'>{app_name}</p>*/}
            <div className='flex-space-between-align-center'>
                <span className='gray-text'>{readnum} 阅读</span>
                <span className='gray-text'>{minBefore}分钟前</span>
            </div>

            {/*<div className='flex-space-between-align-center'>*/}
            {/*    <span>{source}</span>*/}
            {/*    <span>*/}
            {/*        <img style={{marginRight: '5px',}} src={FireIcon} alt=''/>{hot}*/}
            {/*    </span>*/}
            {/*</div>*/}
        </div>
    </div>
}

export default BgNewsCard
